let aniHandler = [];

function stopAnimation() {
  // 取消所有正在进行的动画帧请求
  aniHandler.forEach((val) => cancelAnimationFrame(val));

  // 从DOM中移除所有的鸟元素
  // particles.forEach((particle) => {
  //   particle.element.remove();
  // });

  // 清空particles数组
  particles = [];

  // 设置isLeave标志为true，以防止未来的动画启动
  isLeave = true;
}

// 给window添加事件监听器，以便在需要时可以调用stopAnimation方法
window.addEventListener("birdStart", birdAni);
window.addEventListener("birdEnd", stopAnimation);

function birdAni() {
  // JS is for dynamically creating and moving the birds across the screen.
  // The actual bird flapping and flight wave is CSS animation.

  // Adjust these options here to customize the scene.
  let options = {
    delay: 500,
    speedRange: [2, 5],
    angleRange: [-30, 30],
    sizeRange: [15, 30],
  };

  let bird = document.createElement("span");
  bird.className = "bird";
  let particles = [];
  let length = 12;
  let isLeave = false;

  function init() {
    for (let i = 0; i < length; i++) {
      let particle = initParticle();
      particle.move();
      particles.push(particle);
    }
  }

  init();

  var dl = null;

  function initPos() {
    if (!dl) dl = document.querySelector(".dl");

    if (!dl) {
      console.log("not found");
      //
      //
      return;
    }

    var top = 1000,
      bottom = 500;
    // var top = $(".dl").offset().top + 50;
    // var bottom = $(".dl").offset().height / 1.8 + top;
    return [rand(50, window.innerWidth / 2), rand(top, bottom)];
  }

  function initParticle() {
    let newBird = bird.cloneNode();
    const size = rand(options.sizeRange[0], options.sizeRange[1]);
    newBird.style.width = size + "px";
    newBird.style.height = size / 5 + "px";

    document.querySelector(".animate-bg").appendChild(newBird);

    let pos = initPos();

    return new Particle(newBird, {
      speed: rand(options.speedRange[0], options.speedRange[1]),
      angle: rand(options.angleRange[0], options.angleRange[1]),
      pos: pos,
    });
  }

  aniHandler.push(window.requestAnimationFrame(draw));

  function draw() {
    particles.forEach((particle, i, arr) => {
      if (particle.element.style.display == "none") {
        particle.element.style.display = "inline-block";
        particle.pos = initPos();
      }

      if (
        particle.pos[0] > window.innerWidth ||
        particle.pos[1] > window.innerHeight ||
        particle.pos[0] < 0 - window.innerWidth ||
        particle.pos[1] < 0 - window.innerHeight
      ) {
        particle.element.style.display = "none";
      } else {
        particle.move();
      }
    });

    aniHandler.push(window.requestAnimationFrame(draw));
  }

  function Particle(element, options) {
    this.size = 1;
    this.speed = 1;
    this.angle = 90;
    this.pos = [0, 0];
    this.element = element;

    this.constructor = function (options) {
      for (let i in options) {
        this[i] = options[i];
      }
    };

    this.move = function () {
      var radians = (this.angle * Math.PI) / 180;
      this.pos[0] += Math.cos(radians) * this.speed;
      this.pos[1] += Math.sin(radians) * this.speed;
      // console.log(this.pos)
      this.draw();
    };

    this.draw = function () {
      this.element.style.left = this.pos[0] + "px";
      this.element.style.top = this.pos[1] + "px";
    };

    this.constructor(options);
  }

  function rand(min, max) {
    return Math.random() * (max - min) + min;
  }
}
